<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                <hole-data></hole-data>
            </el-col><el-col :span="14">
                <div  shadow="hover" >
                <echarts-canvas></echarts-canvas>
            </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import EchartsCanvas from "@/components/Echarts/index"
import HoleData from "./data.vue";
</script>

<style scoped>
.sidebar-right {
  flex: 0 0 50%;
  background-color: rgb(250, 250, 250);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}
.sidebar-right:hover {
  border-color: rgba(0, 0, 0, 0.5);
}
</style>